<!--
 * @Author: zhengjingjing 1742420988@qq.com
 * @Date: 2024-11-13 13:58:13
 * @LastEditors: zhengjingjing 1742420988@qq.com
 * @LastEditTime: 2024-12-02 19:24:31
 * @FilePath: \greencityldzbruoyi-ui\src\views\ldzb\rightPanel.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="ldzbrighttopPanel">
    <div style="overflow:auto;overflow-x:hidden;">
      <el-row>
        <el-col :span="12">
          <div class="data_info">
            <div class="fl">
              <img src="../../assets/images/ldzb/gailv1.png" alt="">
              <div class="fl count">
                <p>蓝绿空间化占比</p>
                <!-- <p class="unit-baifenbi">{{ldzb1300}}</p> -->
                <p class="unit-baifenbi ">
                  <count-to v-if="ldzb1300"
                    :startVal='startVal'
                    :endVal='ldzb1300'
                    :duration='durationtime'
                    :decimals="decimalspoint" />
                  </p>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="data_info">
            <div class="fl">
              <img src="../../assets/images/ldzb/gailv1.png" alt="">
              <div class="fl count">
                <p>城市湿地保护实施率</p>
                <!-- <p class="unit-baifenbi" style="color: gray;">{{ldzb1500}}</p> -->
                <p class="unit-baifenbi " style="color: gray;">
                  <count-to v-if="ldzb1500"
                    :startVal='startVal'
                    :endVal='ldzb1500'
                    :duration='durationtime'
                    :decimals="decimalspoint" />
                  </p>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="data_info" style="min-width: 600px;">
            <div class="fl">
              <img src="../../assets/images/ldzb/gailv2.png" alt="">
              <div class="fl count">
                <p>防灾避险绿地设施达标率</p>
                <!-- <p class="unit-baifenbi" style="color: gray;">{{ldzb1400}}</p> -->
                <p class="unit-baifenbi " style="color: gray;">
                  <count-to v-if="ldzb1400"
                    :startVal='startVal'
                    :endVal='ldzb1400'
                    :duration='durationtime'
                    :decimals="decimalspoint" />
                  </p>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="data_info">
            <div class="fl">
              <img src="../../assets/images/ldzb/caochang.png" alt="">
              <div class="fl count">
                <p>防灾避险绿地面积</p>
                <!-- <p class="unit-mianji"  style="color: gray;">{{ldzb1401}}</p> -->
                <p class="unit-baifenbi " style="color: gray;">
                  <count-to v-if="ldzb1401"
                    :startVal='startVal'
                    :endVal='ldzb1401'
                    :duration='durationtime'
                    :decimals="decimalspoint" />
                  </p>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="data_info">
            <div class="fl">
              <img src="../../assets/images/ldzb/ren.png" alt="">
              <div class="fl count">
                <p>防灾避险容纳人数</p>
                <!-- <p class="unit-renshu" style="color: gray;">{{ldzb1402}}</p> -->
                <p class="unit-baifenbi " style="color: gray;">
                  <count-to v-if="ldzb1402"
                    :startVal='startVal'
                    :endVal='ldzb1402'
                    :duration='durationtime'
                    :decimals="decimalspoint" />
                  </p>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>

  </div>
  </div>
</template>
<script>
  import {getStatldzbstat} from "../../api/ldzb/ldzb.js";
  import * as echarts from "echarts";
  import { getDicts } from "../../api/system/dict/data";
  import { EleResize } from "@/utils/esresize";
  import CountTo from 'vue-count-to'

  export default {
    name: 'righttopPanel',
    props: {
      paramObj: { default: () => { } },
    },
    components: {
      CountTo,
    },
    data() {
      return {
        ldzbdataxzqfanwei:undefined,
        ldzbdata:undefined,
        ldzb1300:undefined,
        ldzb1400:undefined,
        ldzb1401:undefined,
        ldzb1402:undefined,
        ldzb1500:undefined,
        // count to 动画效果：间隔时间、保留小数位数\
        durationtime:1000,
        decimalspoint:2,
        startVal:0,
      }
    },
    mounted() {
      let _self = this;
      setTimeout(() => {
        _self.getData();
        }, 800);
    // 间隔调用 Vue CountTo
    this.intervalId = setInterval(() => {
      this.startVal = Math.random(); // 随机生成一个 0 到 1 的数作为目标值
    }, 60000);
    },
    beforeDestroy() {
    // 清除间隔调用
      if (this.intervalId) {
        clearInterval(this.intervalId);
      }
    },
    methods: {
      async getData(){
        let _self = this
        // 先构建用于查询数据的查询参数对象
        let query = _self.paramObj;
        // _self.ldzbdataxzqfanwei = undefined;
        _self.ldzbdata = undefined;
        // _self.ldzb1300 = undefined;
        _self.ldzb1400 = undefined;
        _self.ldzb1401 = undefined;
        _self.ldzb1402 = undefined;
        _self.ldzb1500 = undefined;

        let resultdata = await getStatldzbstat(query);
        _self.ldzbdata = resultdata.data
        let queryxzqfanwei={
          xzqfanwei: _self.paramObj.xzqfanwei
        }
        let resultxzqfanweidata = await getStatldzbstat(queryxzqfanwei);
        _self.ldzbdataxzqfanwei = resultxzqfanweidata.data
        for (let index = 0; index < _self.ldzbdataxzqfanwei.length; index++) {
          const element = _self.ldzbdataxzqfanwei[index];
          if (element.statldzbcode == '1300'){
            _self.ldzb1300 = parseFloat(element.statvalue);
          }
        };
        // console.log(_self.ldzbdata);

        for (let index = 0; index < _self.ldzbdata.length; index++) {
          const element = _self.ldzbdata[index];
          if (element.statldzbcode == '1400'){
            _self.ldzb1400 = parseFloat(element.statvalue);
          };
          if (element.statldzbcode == '1401'){
            _self.ldzb1401 = parseFloat(element.statvalue);
          };
          if (element.statldzbcode == '1402'){
            _self.ldzb1402 =  parseInt(element.statvalue);
          };
          if (element.statldzbcode == '1500'){
            _self.ldzb1500 = parseFloat(element.statvalue);
          };
        }

      }
    }
  }
</script>
<style>
#ldzbrighttopPanel .el-row {
    margin-top: 15px;
    margin-bottom: 10px;
}
#ldzbrighttopPanel .fl {
    float: left;
}
#ldzbrighttopPanel .data_info{
    width: 12.5%;
    height: 70px;
    margin-left: 5px;
    min-width: 220px;
    margin-top: 5px;
}

#ldzbtopPanel .data_info  div{
    width: 50%;
    position: relative;
}
#ldzbrighttopPanel .data_info img{
    position: absolute;
    top: 10px;
    width: 50px;
}
#ldzbrighttopPanel .data_info .count{
    margin-left: 65px;
    margin-top: 0px !important;
}
#ldzbrighttopPanel .data_info .count p{
  margin: 5px 0px 5px 0px;
}
#ldzbrighttopPanel .data_info .count p:nth-child(1){
    font-size: 18px;
    font-weight: normal;
    color: #fff;
    margin: 5px;
}
#ldzbrighttopPanel .data_info .count p:last-child{
    font-family: DigifaceWide;
    color: #FFF233;
    text-shadow: 0 0 25px #00fbfe;
    font-size: 30px;
    font-weight: bolder;

}
#ldzbrighttopPanel .data_info .unit-baifenbi:after,
  .unit-mianji:after,
  .unit-geshu:after,
  .unit-gongli:after,
  .unit-renshu:after{
  display: inline-block;
    /* margin-left: 4%; */
    font-size: 16px;
    color: #fff;
    content: '%';
    font-weight: normal;
    text-shadow:none;
    font-family: '微软雅黑';
}
#ldzbrighttopPanel .data_info .unit-baifenbi:after{
    content: '%';
}
#ldzbrighttopPanel .data_info .unit-mianji:after{
    content: 'm²';
}
#ldzbrighttopPanel .data_info .unit-geshu:after{
    content: '个';
}
#ldzbrighttopPanel .data_info .unit-gongli:after{
    content: '公里';
}
#ldzbrighttopPanel .data_info .unit-renshu:after{
    content: '人';
}

</style>
